<template>
  <div class="w1200 hospital_detail_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb
        class="el_breadcrumb"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          ><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><nuxt-link to="/question">问答</nuxt-link></el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ newsInfo.question }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <!-- 内容 开始 -->
    <div class="content">
      <!-- 左侧内容 开始 -->
      <div class="left_box">
        <!-- 资讯详情 开始 -->
        <div class="news_detail">
          <div class="title">
            <div class="info">
              <h2 class="h2">{{ newsInfo.question }}</h2>
              <div class="author">
                <span class="name">{{ newsInfo.questionPerson }}</span>
                <span class="time">更新于 {{ newsInfo.questionTime }}</span>
                <span>{{ newsInfo.initReadCnt }}浏览</span>
              </div>
              <div class="key_words">
                <span
                  v-for="(item, index) in getLabel(newsInfo.topic)"
                  :key="`label_${index}`"
                  >#{{ item }}</span
                >
              </div>
            </div>
            <div class="btn" @click="openDialog">
              <img src="@/assets/images/question/msg.png" alt="" />
              <span>我来回答</span>
            </div>
          </div>

          <div class="ask_head">
            <span class="name">共{{ $getAnswerList(newsInfo) }}个回答</span>
          </div>

          <!-- 回答列表 开始 -->
          <div class="ask_list">
            <!-- 单条回答 开始 -->
            <template v-for="(item, index) in 3">
              <div
                class="ask_box"
                :key="`answer_${index}`"
                v-if="newsInfo['answerContent' + (index + 1)]"
              >
                <div class="user_info">
                  <div class="avatar">
                    <img src="@/assets/images/avatar.png" class="img" alt="" />
                  </div>
                  <div class="info">
                    <span class="name">{{
                      newsInfo["answerPerson" + (index + 1)]
                    }}</span>
                    <span class="time"
                      >更新于 {{ newsInfo["answerTime" + (index + 1)] }}</span
                    >
                  </div>
                </div>
                <div
                  class="ask_content"
                  v-html="newsInfo['answerContent' + (index + 1)]"
                ></div>
              </div>
            </template>
            <!-- 单条回答 end -->
          </div>
          <!-- 回答列表 end -->

          <!-- <div class="outpatientIntroduce" v-html="newsInfo.content"></div> -->
        </div>
        <!-- 资讯详情 end -->
      </div>
      <!-- 左侧内容 end -->

      <!-- 右侧内容 开始 -->
      <div class="right_box">
        <!-- 社区问题 开始 -->
        <!-- <div class="problem_box">
                    <div class="head">社区问题</div>
                    <div class="list_box doctor_list">
                        <ListQuestion v-for="(item, index) in questionList" :key="`news_${index}`" :info="item"
                            :index="index" />
                    </div>
                </div> -->
        <!-- 社区问题 end -->

        <!-- 相关问题 开始 -->
        <div class="problem_box">
          <div class="head">相关问题</div>
          <div class="list_box goods_list">
            <!-- <Goods v-for="(item, index) in goodsList" :key="`goods_${index}`" :info="item" /> -->
            <ListAsk
              v-for="(item, index) in newsInfo.relQuestions || []"
              :key="`news_${index}`"
              :info="item"
              :index="index"
            />
          </div>
        </div>
        <!-- 相关问题 end -->
      </div>
      <!-- 右侧内容 end -->
    </div>
    <!-- 内容 end -->

    <!-- 弹框 开始 -->
    <div class="li_popup" v-show="showPopup">
      <div class="blk"></div>
      <div class="li_popup_content">
        <div class="image_box">
          <img src="@/assets/images/question/book.png" alt="" />
        </div>
        <div class="li_content">
          <p>您非邀请名单内用户</p>
          <p class="sub">为保障答题质量，目前仅针对邀请用户开放！</p>
          <button class="btn" @click="closeDialog">我知道了</button>
        </div>
      </div>
    </div>
    <!-- 弹框 end -->
  </div>
</template>
<script>
import {
  GET_QUESTIONANSWER_INFO,
  GET_QUESTIONANSWER_SEARCH,
} from "@/http/interface";
import ListQuestion from "@/components/question/listCell.vue";
import ListAsk from "@/components/question/ask.vue";
export default {
  components: {
    ListQuestion,
    ListAsk,
  },
  data() {
    return {
      newsInfo: {},
      title: "",
      description: "",
      keywords: "",
      questionList: [],
      showPopup: false,
      questionId: "",
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
        {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/questions/${this.questionId}`
                }
      ],
      link: [
        {
          ref: "canonical",
          href: `${this.$domain}/question/${this.questionId}`,
        },
      ],
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios, params }) {
    let _params = { id: params.id };
    let res = await $axios.get(GET_QUESTIONANSWER_INFO, { params: _params });
    let newsInfo = res.data || {};

    // 社区问答
    // let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: { pageNumber: 1, pageSize: 10 } })
    // let qbj = qes.data || {}
    // let questionList = qbj.list || []

    return {
      newsInfo,
      title: newsInfo.seoTitle,
      keywords: newsInfo.seoKeywords,
      description: newsInfo.seoDescription,
      questionId: params.id,
      //questionList
    };
  },
  mounted() {},
  methods: {
    // 动态获取className
    getClassName(index) {
      if (index % 3 == 0) {
        return "";
      }
      if (index % 3 == 1) {
        return "blue";
      }
      if (index % 3 == 2) {
        return "dark_blue";
      }
    },

    // 处理标签
    getLabel(str) {
      if (!str) {
        return [];
      }
      let arr = str.split(",");
      return arr;
    },

    // 打开弹框
    openDialog() {
      this.showPopup = true;
    },

    // 关闭弹框
    closeDialog() {
      this.showPopup = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/question/detail.less";
</style>